<extend name="Base/common" />
<block name="body">
<style text='text/css'>
.image_material{
  border: 1px dashed #ddd;
  width: 308px;
  height: 196px;
  background: #eee;
  text-align: center;
  color: #333;
  display: block;
  float: left;
  margin-left:10px;
  display:none;
  position:relative;
}
.image_material .select_image{line-height: 196px; display:block; height:200px;}
.image_material .delete{ position:absolute; bottom:3px; left:3px;}
.appmsg_area{ position:relative;}
.appmsg_area .delete{ position:absolute; bottom:10px; left:10px; z-index:1000; margin:10px;}
.appmsg_area .select_video{  height: 240px;line-height: 240px;}
.image_wrap_img{ position: absolute;left: -2px;top: -2px; width:314px;height: 200px;}
.image_wrap_img img{ position: absolute;left: 16px;top: 10px; width:280px;height: 160px;}
.appmsg_wrap_img{ position: absolute;left: 6px;top: 6px; width:298px;height: 188px;z-index: 1000;padding: 5px;background: white;  border: 1px dashed #ddd;}
.appmsg_wrap_img img{ position: absolute;left: 13px;top: 35px; width:280px;height: 150px;}
.voice_wrap{ width:308px;}
.video_wrap{ width:222px;}
.video_wrap_video{ position: absolute;left: 6px;top: 6px; width:298px;height: 230px;z-index: 1000;padding: 5px;background: white;  border: 1px dashed #ddd;}
.video_wrap_video video{width: 295px}
.voice_wrap_voice{ position: absolute;left: 6px;top: 6px; width:298px;height: 188px;z-index: 1000;padding: 5px;background: white;  border: 1px dashed #ddd;}
#video_area{ height:250px}
</style>
  <div class="span9 page_message">
  
    <section id="contents"> <include file="Addons/_nav" />
    
      <div class="tab-content"> 
      
      <div class="message_list" style="padding:10px;  text-align: left;color: #333;padding: 10px;
background-color: #eaeaea;">
           
            <php> $post_url || $post_url = U('add?model='.$model['id'], $get_param);</php>
            <form id="form" action="{$post_url}" method="post" class="form-horizontal form-center">

              <input type="hidden" name="id" value="{$data.id}" />

              <?php if($reply_scene == 2) { ?>
              
                
                <input class="text input-large" name="reply_scene" value="{$reply_scene}" type="hidden">                   
                <div class="form-item cf toggle-keyword">
                  <label class="item-label">
                  <span class="need_flag">*</span>                    关键词                                        <span class="check-tips">
                    （多个关键词可以用空格分开，如“高富帅 白富美”）                      </span></label>
                  <div class="controls">
                    <input class="text input-large" name="keyword" value="{$data.keyword}" type="text">               
                  </div>
                </div>
              <?php } else { ?>
                <input class="text input-large" name="keyword" value="" type="hidden">   
                <input class="text input-large" name="reply_scene" value="{$reply_scene}" type="hidden">   
              <?php } ?>
            <div class="msg_tab">
               <a class="txt current" href="javascript:;">文本消息</a>
                <a class="appmsg" href="javascript:;">图文消息</a>
                <a class="image" href="javascript:;">图片消息</a>
                <a class="voice" href="javascript:;">语音消息</a>
                <a class="video" href="javascript:;">视频消息</a>
            </div>
                <input type="hidden" name="msg_type" value="text"/>
                <label class="textarea" style="position:relative; overflow:hidden; zoom:1;">
                  <a id="getText" class="txt_icon current" onClick="selectText();" style="position: absolute; bottom: 20px;left: 10px;cursor: pointer; color: #888;  border-radius: 5px; border: 1px solid #ccc;  padding: 5px 20px; background-color: #eee;">选择文本素材</a>
                    <textarea name="content" placeholder="请输入要发送的文本"  id='message_text'>{$data.content}</textarea>
                    <div style="display:none" class="appmsg_area" id="appmsg_area">
                        <input type="hidden" name="appmsg_id" value="<?php echo $data['group_id'] ? $data['group_id'] : 0; ?>"/>
                         <a class="select_appmsg" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/material_data')}',selectAppMsgCallback)">选择图文</a>
                        <notempty name="data.group_id">
                              <div class="appmsg_wrap_img">
                                <span>{$data.group_id|get_material_ntitle}</span>
                                <img src="{$data.group_id|get_material_ncover}"/>
                              </div>
                              <a class="delete" href="javascript:;" style="left: 310px;display:block">删除</a>
                        </notempty>
                        <div class="appmsg_wrap"></div>
                        <a class="delete" href="javascript:;" style="left: 310px;">删除</a>
                    </div>
                    
                    <div style="display:none;margin:0 10px 10px 0; background:#ddd; padding:6px;height:204px; width:930px;float:left" class="msg_image controls">
                      <div class="uploadrow2" rel="image" title="点击修改图片" style="float:left; width:308px;">
                            <input type="file" id="upload_picture_image">
                            <input type="hidden" name="image" id="cover_id_image" value="<?php echo $data['image_id'] ? $data['image_id'] : 0; ?>"/>
                            <notempty name="data.image_id">
                              <div class="upload-img-box">
                                    <img width="100%" height="100%" src="{$data.image_id|get_cover_url}"/>
                              </div>
                            </notempty>
                            <div class="upload-img-box">
                                    <img width="100%" height="100%" src=""/>
                            </div>
                        </div>
                        <div class='image_material' id='image_material'>
                            <input type="hidden" name="image_material" id="cover_id_image" value="<?php echo $data['image_material'] ? $data['image_material'] : 0; ?>"/>
                            <a class="select_image" href="javascript:;"  onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/picture_data')}',selectImageCallback,'选择图片素材')">从素材库选择图片</a>
                            <div class="image_wrap"></div>
                            <notempty name="data.image_material">
                                <div class="image_wrap_img">
                                  <img src="{$data.image_material|get_material_icover}"/>
                                </div>
                              <a class="delete" href="javascript:;" style="left: 15px;display:inline;" >删除</a>
                            </notempty>
                            <a class="delete" href="javascript:;" style="left: 15px;display:none;" >删除</a>
                         </div>
                    </div>
                     
                     <div style="display:none" class="appmsg_area" id="voice_area">
                        <input type="hidden" name="voice_id" value="<?php echo $data['voice_id'] ? $data['voice_id'] : 0; ?>"/>
                        <a class="select_appmsg" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/voice_data')}',selectVoiceCallback,'选择语音素材')">选择语音素材</a>
                        <div class="voice_wrap"></div>
                        <notempty name="data.voice_id">
                              <div class="voice_wrap_voice" onClick="playSound('sound_{$vo.id}',this);">
                                    <img class="icon_sound" src="__IMG__/icon_sound.png"/>
                                    <p class="audio_name">{$data.voice_id|get_material_vtitle}
                                      <span class="fr colorless">未知时长</span>
                                    </p>
                                    <p class="ctime colorless">{$data.voice_id|get_material_cTime}</p>
                                    <audio id="sound_{$vo.id}" src="{$data.voice_id|get_material_file}"></audio>
                              </div>
                             <a class="delete" href="javascript:;"  style="left: 310px;display: inline;">删除</a>
                        </notempty>
                        <a class="delete" href="javascript:;" style="left: 310px;display: inline;">删除</a>
                    </div>
                      <div style="display:none" class="appmsg_area" id="video_area">
                        <input type="hidden" name="video_id" value="<?php echo $data['video_id'] ? $data['video_id'] : 0; ?>"/>
                        <a class="select_appmsg select_video" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('/Home/Material/video_data')}',selectVideoCallback,'选择视频素材')">选择视频素材</a>
                        <notempty name="data.video_id">
                              <div class="video_wrap_video">
                                <p class="title">{$data.video_id|get_material_vtitle}</p>
                                <p class="ctime colorless">{$data.video_id|get_material_cTime}</p>
                                <video src="{$data.video_id|get_material_file}" controls="controls"> 
                                 <source src="movie.ogg" type="video/ogg"> 
                                 <source src="{$data.video_id|get_material_file}" type="video/mp4"> <!-- MPEG4 类型：for safali & ie9 -->
                                 您的浏览器不支持 video 标签。                                 
                                </video>
                              </div>
                             <a class="delete" href="javascript:;"  style="left: 310px;display: inline;">删除</a>
                        </notempty>
                        <div class="video_wrap"></div>
                        <a class="delete" href="javascript:;"  style="left: 310px;display: none;">删除</a>
                    </div>
                 </label>
                 
                 <!--
                 <div class="action_type">
                    <a class="action_item face" href="javascript:;" title="表情">&nbsp;</a>
                    <a class="action_item link" href="javascript:;" title="连接">&nbsp;</a>
                    <div class="action_item picture" href="javascript:;" title="图片">
                        <div class="controls uploadrow2" title="点击修改图片" rel="pic">
                          <input type="file" id="upload_picture_pic">
                          <input type="hidden" name="pic" id="cover_id_pic" value="0"/>
                          <div class="upload-img-box">
                           
                              <div class="upload-pre-item2"><img width="100" height="100" src=""/></div>
                            
                          </div>
                      </div>
                    </div>
                    <a class="action_item article" href="javascript:;" title="图文">&nbsp;</a>
                 </div>
                 -->
                 <!-- <div class="form-item cf toggle-send_type">
                    <label class="item-label"> 发送方式 <span class="check-tips"> </span></label>
                    <div class="controls">
                      <select name="send_type">
                        <option selected="" toggle-data="group_id@show,send_openids@hide" class="toggle-data" value="0">按用户组发送 </option>
                        <option toggle-data="group_id@hide,send_openids@show" class="toggle-data" value="1">指定OpenID发送 </option>
                      </select>
                    </div>
                  </div>
                  <div class="form-item cf toggle-group_id">
                        <label class="item-label"> 群发对象 <span class="check-tips"> （全部用户或者某分组用户） </span></label>
                        <div class="controls">
                          <div id="dynamic_select_group_id"></div>
                          <select name="group_id">
                            <option toggle-data="全部用户" class="toggle-data" value="0">全部用户</option>
                            <volist name="group_list" id="vo">
                            <option toggle-data="" class="toggle-data" value="{$vo.id}">{$vo.title} </option>
                            </volist>

                          </select>
                        </div>
                      </div>
                      <div class="form-item cf toggle-send_openids" style="display: none;">
                        <a class="border-btn" href="javascript:;" onClick="selectUser('send_openids')">选择指定的用户</a>
                        <br/>
                        <div class="mt10">指定的用户：<span id="send_openids" class="colorless"></span></div>
                        <br/>
                        <div style="display:none">
                            <label class="item-label"> 要发送的OpenID <span class="check-tips"> （多个可用逗号或者换行分开，OpenID值可在微信用户的列表中找到） </span></label>
                            <div class="controls">
                              <label class="textarea input-large">
                                <textarea name="send_openids"></textarea>
                              </label>
                            </div>
                        </div>
                      </div>
                      <div class="form-item cf toggle-preview_openids">
                        <a class="border-btn" href="javascript:;" onClick="selectUser('preview_openids')">选择预览人</a>
                        <br/>
                        <div class="mt10">预览人：<span id="preview_openids" class="colorless"></span></div>
                        <br/>
                        <div style="display:none">
                            <label class="item-label"> 预览人OPENID <span class="check-tips"> （选填，多个可用逗号或者换行分开，OpenID值可在微信用户的列表中找到） </span></label>
                            <div class="controls">
                              <label class="textarea input-large">
                                <textarea name="preview_openids" style="height:50px; min-height:50px;"></textarea>
                              </label>
                            </div>
                        </div>
                      </div> -->
                      
                 <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">保存</button>
                 
                      
            </form>
        </div>
       
      </div>
    </section>
  </div>
</block>
<block name="script">
  <link href="__STATIC__/datetimepicker/css/datetimepicker.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <php>if(C('COLOR_STYLE')=='blue_color') echo '
    <link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
    ';</php>
  <link href="__STATIC__/datetimepicker/css/dropdown.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.js"></script> 
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js?v={:SITE_VERSION}" charset="UTF-8"></script> 
  <script type="text/javascript">
$('#submit').click(function(){
    $('#form').submit();
});
function preview(){
    var query = $('#form').serialize();
    $.post("{:U('preview')}",query,function(data){
      if (data.status==1) {
          if (data.url) {
            updateAlert(data.info + ' 页面即将自动跳转~','alert-success');
          }else{
            updateAlert(data.info ,'alert-success');
          }
          setTimeout(function(){
            if (data.url) {
                location.href=data.url;
            }else{
                location.reload();
            }
          },1500);
      }else{
          updateAlert(data.info);
          setTimeout(function(){
            if (data.url) {
                location.href=data.url;
            }else{
                $('#top-alert').find('button').click();
            }
          },1500);
      }
    })
}

$(function(){
  showTab();
  
  $('.toggle-data').each(function(){
    var data = $(this).attr('toggle-data');
    if(data=='') return true;   
    
       if($(this).is(":selected") || $(this).is(":checked")){
       change_event(this)
     }
  });
  
  $('select').change(function(){
    $('.toggle-data').each(function(){
      var data = $(this).attr('toggle-data');
      if(data=='') return true;   
      
       if($(this).is(":selected") || $(this).is(":checked")){
         change_event(this)
       }
    });
  });
});
$(function(){
  //初始化上传图片插件
  initUploadImg({width:308,height:200,callback:function(){
    $('.image_wrap').html('').hide();
    $('.select_image').show();
    $('.image_material .delete').hide();
    $('input[name="image_material"]').val(0);
  }});
  $('.uploadify-button').css('background-color','#ccc')
})

//初始化默认显示当前使用中的素材
$(function(){

   var type = '{$data.msg_type}';
      switch ( type ) {

        case 'image':
          $('.msg_tab .image').click();
          break;
        case 'news':
          $('.msg_tab .appmsg').click();
          break;
        case 'voice':
          $('.msg_tab .voice').click();
          break;
        case 'video':
          $('.msg_tab .video').click();
          break;
        default:
          break;
          
      }

})

$('.msg_tab .txt').click(function(){
  //纯文本
  $(this).addClass('current').siblings().removeClass('current');
  $('input[name="msg_type"]').val('text');
  $('textarea[name="content"]').show().siblings().hide();
  $('#getText').show();
})
$('.msg_tab .appmsg').click(function(){
  //图文消息
  $(this).addClass('current').siblings().removeClass('current');
  $('input[name="msg_type"]').val('appmsg');
  $('#appmsg_area').show().siblings().hide();
  $('#getText').hide();
})
$('.msg_tab .image').click(function(){
  //图片消息
  $(this).addClass('current').siblings().removeClass('current');
  $('input[name="msg_type"]').val('image');
  $('.msg_image').show().siblings().hide();
  $('#getText').hide();
  $('#image_material').show();
})
$('.msg_tab .voice').click(function(){
  //语音消息
  $(this).addClass('current').siblings().removeClass('current');
  $('input[name="msg_type"]').val('voice');
  $('#voice_area').show().siblings().hide();
  $('#getText').hide();
  $('#image_material').hide();
})
$('.msg_tab .video').click(function(){
  //视频消息
  $(this).addClass('current').siblings().removeClass('current');
  $('input[name="msg_type"]').val('video');
  $('#video_area').show().siblings().hide();
  $('#getText').hide();
  $('#image_material').hide();
})

$('#appmsg_area .delete').click(function(){
  $('#appmsg_area .appmsg_wrap').html('').hide();
  $('#appmsg_area .appmsg_wrap_img').html('').hide();
  $('#appmsg_area .select_appmsg').show();
  $('#appmsg_area .delete').hide();
  $('input[name="appmsg_id"]').val(0);
})
$('.image_material .delete').click(function(){
  $('.image_wrap').html('').hide();
  $('.image_wrap_img').html('').hide();
  $('.select_image').show();
  $('.image_material .delete').hide();
  $('input[name="image_material"]').val(0);
})
$('#voice_area .delete').click(function(){
  $('#voice_area .voice_wrap').html('').hide();
  $('#voice_area .voice_wrap_voice').html('').hide();
  $('#voice_area .select_appmsg').show();
  $('#voice_area .delete').hide();
  $('input[name="voice_id"]').val(0);
})
$('#video_area .delete').click(function(){
  $('#video_area .video_wrap').html('').hide();
  $('#video_area .video_wrap_video').html('').hide();
  $('#video_area .select_appmsg').show();
  $('#video_area .delete').hide();
  $('input[name="video_id"]').val(0);
})

function selectAppMsgCallback(_this){
  $('.appmsg_wrap').html($(_this).html()).show();
  $('#appmsg_area .select_appmsg').hide();
  $('#appmsg_area .delete').show();
  $('input[name="appmsg_id"]').val($(_this).data('group_id'));
  $.Dialog.close();
}
function selectImageCallback(_this){
  $('.image_wrap').html($(_this).html()).show();
  $('.select_image').hide();
  $('.image_material .delete').show();
  $('input[name="image_material"]').val($(_this).data('id'));
  $("input[name='image']").val(0);
  $('.upload-img-box').hide();
  $.Dialog.close();
}
function selectVoiceCallback(_this){
  $(_this).find('.icon_sound').attr('src',IMG_PATH+'/icon_sound.png');
  $('.voice_wrap').html($(_this).html()).show();
  $('#voice_area .select_appmsg').hide();
  $('#voice_area .delete').show();
  $('input[name="voice_id"]').val($(_this).data('id'));
  $.Dialog.close();
}
function selectVideoCallback(_this){
  $('.video_wrap').html($(_this).html()).show();
  $('#video_area .select_appmsg').hide();
  $('#video_area .delete').show();
  $('input[name="video_id"]').val($(_this).data('id'));
  $.Dialog.close();
}
function selectText(){
  $.WeiPHP.openSelectLists("{:U('Material/text_lists')}",1,'选择素材',function(data){
    if(data && data.length>0){
      for(var i=0;i<data.length;i++){
        var id=data[i]['id'];
        if(id){
          $.post("{:U('Material/get_content_by_id')}",{'id':id},function(d){
            $('#message_text').text(d);
          })
        }
      }
    }
  })
}
// function selectText(){
//  $.WeiPHP.openSelectUsers("{:U('Material/text_lists')}",1,function(data){
//    if(data && data.length>0){
//      for(var i=0;i<data.length;i++){
//        var id=data[i]['id'];
//        if(id){
//          $.post("{:U('Material/get_content_by_id')}",{'id':id},function(d){
//            $('#message_text').text(d);
//          })
//        }
//      }
//    }
//  })
// }
function selectUser(name){
  $.WeiPHP.openSelectUsers("{:addons_url('UserCenter://UserCenter/lists')}",0,function(data){
    if(data && data.length>0){
      var idsArr  = new Array();
      var nameArr = new Array();
      for(var i=0;i<data.length;i++){
        idsArr.push(data[i].openid);
        nameArr.push(data[i].nickname);
      }
      $('textarea[name="'+name+'"]').val(idsArr.toString());
      $('#'+name).text(nameArr.toString());
    }
  })
}

//点击语音文件播放语音，不信试试
function playSound(id,obj){
  var audio = document.getElementById(id);
  if(audio.paused){
    audio.play();
    $(obj).find('img').attr('src',IMG_PATH+'/icon_sound_play.gif');
    audio.addEventListener('ended', function () {  
//      alert('over');
      $(obj).find('img').attr('src',IMG_PATH+'/icon_sound.png');
    }, false);
    return;
  }
  audio.pause();
  $(obj).find('img').attr('src',IMG_PATH+'/icon_sound.png');
  
}
</script> 
</block>
